<template>
  <view class="film-item" @click="handleClick">
    <view class="flex">
      <u-image width="140rpx" height="140rpx" radius="12rpx" mode="scaleToFill" :src="data.imageUrl"></u-image>
      <view class="ml-20 flex flex-1 flex-col h-full">
        <view class="flex items-center flex-1 justify-between mb-10">
          <text class="font-30 font-bold text-row-1">{{ data.name }}</text>
          <view v-if="data.autoTime > 0" class="flex items-center shrink-0">
            <u-icon name="clock" size="24rpx"></u-icon>
            <view class="ml-10">
              <u-count-down :time="data.autoTime * 1000" auto-start format="mm:ss" @finish="handleOnFinish"></u-count-down>
            </view>
          </view>
          <text v-else class="ml-10">{{ data.orderStatusName }}</text>
        </view>
        <text class="text-666 mb-10">{{ data.number }}份</text>
        <text class="font-30 font-700 text-price text-price-small-before">{{ data.asPrice | formatDigit }}</text>
      </view>
    </view>
    <view v-if="data.orderStatus == 0" class="flex justify-end mt-20">
      <zm-button round height="54rpx" font-size="26rpx" @click="handleClick">去支付</zm-button>
    </view>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
export default {
  mixins: [hook, weixin],
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      parent: null
    }
  },
  methods: {
    handleOnFinish() {
      this.$emit("refresh", this.data)
    },
    handleClick() {
      this.toView({
        url: "pages/order/order-mall-info/order-mall-info",
        params: {
          orderId: this.data.orderId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.film-item {
  display: flex;
  padding: 24rpx;
  margin: 20rpx 24rpx;
  margin-bottom: 0;
  border-radius: 16rpx;
  flex-direction: column;
  background-color: #fff;
}
</style>
